<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Login</title>
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
    <link href="//res.zhen-yee.com/assert/element-ui-2.4.7.css" rel="stylesheet">
    <link href="//res.zhen-yee.com/assert/amazeui.2.7.2.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./Login.css">
</head>

<body>
    <div id="app">
        <el-container>
            <el-header style="height: 100px;"><img src="http://res.zhen-yee.com/zhenyi/login-logo.png" alt=""></el-header>
                <el-main v-bind:style="{height:mainHeight+'px'}">
                    <el-form ref="form" class="form">
                        <el-form-item label="账号 :">
                            <el-input v-model="account"></el-input>
                        </el-form-item>
                        <el-form-item label="密码 :">
                            <el-input v-model="password" type="password"></el-input>
                            <el-button type="primary" @click='login' class="login-btn">登录</el-button>
                        </el-form-item>
                    </el-form>
                </el-main>
                <el-footer>Copyright ©2018 蓁奕互联网科技 All Rights Reserved</el-footer>
        </el-container>
    </div>
    <!-- <script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script> -->
    <script src="//res.zhen-yee.com/assert/vue.2.5.16.min.js"></script>
    <!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
    <script src="//res.zhen-yee.com/assert/element-ui-2.4.7.js"></script>
    <!-- <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script> -->
    <script src="//res.zhen-yee.com/assert/qs.6.5.2.min.js"></script>
    <!-- <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script> -->
    <script src="//res.zhen-yee.com/assert/axios.0.18.0.min.js"></script>
    <!-- <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> -->
    <script src="//res.zhen-yee.com/assert/jquery.3.3.1.min.js"></script>
    <!-- <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script> -->
    <script src="//res.zhen-yee.com/assert/layer-2.3.js"></script>
    <!-- <link href="https://cdn.bootcss.com/layer/2.3/skin/layer.css" rel="stylesheet"> -->
    <link href="//res.zhen-yee.com/assert/skin/layer.css" rel="stylesheet">
    <script src="utils.js"></script>
    <script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                account: null,
                password: null,
                mainHeight: ''
            }
        },
        mounted: function() {
            this.getMainHeight()
        },
        methods: {
            login() {
                var self = this;
                var encode = encodeURI(self.aesCBC(self.password))
                var url = '/xhc/admin/auth';
                var params = {
                    account: self.account,
                    password: encode
                };
                var success = function(response) {
                    var status = response.status
                    if (status == 200) {
                        self.$message({
                            message: '登录成功',
                            type: 'success'
                        });
                        self.$router.push({
                            name: 'Ticket'
                        })
                    } else {
                        utils.fail('登录失败')
                    }
                }
                var fail = function(res) {
                    var msg = ''
                    if (validateData(res)) {
                        msg = res.msg
                    } else {
                        msg = '登录失败'
                    }
                    utils.fail(msg)
                }
                var complete = function(res) {}
                utils.requestLoading(url, params, success, fail, complete)
            },
            aesCBC(text) {
                var self = this;
                var aesText = text;
                var key = CryptoJS.enc.Utf8.parse(self.$store.state.aesKey);
                var iv = CryptoJS.enc.Utf8.parse(self.$store.state.aesIv);
                aesText = CryptoJS.AES.encrypt(text, key, {
                    iv: iv,
                    mode: CryptoJS.mode.CBC,
                    padding: CryptoJS.pad.Pkcs7
                }).toString();
                return aesText;
            },
            getMainHeight() {
                this.mainHeight = window.screen.availHeight - 160;
            }
        }
    })
    </script>
</body>

</html>